import * as echarts from "../component/ec-canvas/echarts"
let chart = null;
 
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: "100rpx",
    height: "100rpx",
    devicePixelRatio: '100'
  });
  canvas.setChart(chart);
 
  var option = {
    // ... 其他ECharts选项
    series: [{
      type: 'map',
      mapType: 'china',
      coordinateSystem: 'geo',
      label: {
        normal: {
          show: true,
        },
        emphasis: {
          textStyle: {
            color: '#fff',
          },
        },
      },
      itemStyle: {
        normal: {
          borderColor: '#389BB7',
          areaColor: '#fff',
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0,
        },
      },
      animation: false,
      data: [
        { name: '郑州市', value: 100 },
        { name: '洛阳市', value: 10 },
        { name: '开封市', value: 20 },
        { name: '信阳市', value: 30 },
        { name: '驻马店市', value: 40 },
        { name: '南阳市', value: 41 },
        { name: '周口市', value: 15 },
        { name: '许昌市', value: 25 },
        { name: '平顶山市', value: 35 },
        { name: '新乡市', value: 35 },
        { name: '漯河市', value: 35 },
        { name: '商丘市', value: 35 },
        { name: '三门峡市', value: 35 },
        { name: '济源市', value: 35 },
        { name: '焦作市', value: 35 },
        { name: '安阳市', value: 35 },
        { name: '鹤壁市', value: 35 },
        { name: '濮阳市', value: 35 },
        { name: '开封市', value: 45 },
      ],
      // ... 其他系列选项
    }]
    // ... 其他ECharts选项
  };
 
  chart.setOption(option);
  return chart;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ecComponent :'',
    ec: {
      onInit: initChart
    },
    option : {
      grid: {
        height: 100 // 设置图表的高度为200像素
      },
      title:{
        text: 'ECharts 柱状图示例', // 主标题文本
        subtext: '副标题', // 副标题文本
        left: 'center', // 标题水平位置
        textStyle: { // 主标题样式
            color: 'red'
        }
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [15, 20, 12, 30, 45, 26],
          type: 'bar',
          showBackground: true,
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            distance: 15, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效
            verticalAlign: 'middle',
            textStyle: {
              color: '#424656', // 顶部数据的颜色
              fontSize: 14     // 顶部数据的字体大小
            },

          }
        }
      ]
    },
    option1 :{
      title: {
        text: 'ECharts 折线图示例',
        left: 'center', // 标题水平位置,
        textStyle: {
          height: 1// 
      }
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['收款', '回款'],
        y:"bottom"
      },
      grid: {
        height: '100rpx', // 设置纵向高度
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          margin: 5 // 增大这个值可以增大纵向间距
      },
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '收款',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '回款',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
      
      ]
    }
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
 
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // this.ecComponent = this.selectComponent('#mychart-dom-map');
    // let context = this.ecComponent.getContext();
    // // 使用initChart方法初始化图表
    // initChart(context, this.ecComponent.width, this.ecComponent.height, this.ecComponent.dpr);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
   // this.ecComponent.destroy();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  onInstance(){
    console.log()
  },
  
})